<template>
	<view>
		<view style="color: #606266; font-size: 32rpx">{{ config.title }}</view>
		<view v-if="!readonly">
			<button
				class="primary-button plain small-size mt10"
				@tap="addColumn()"
			>
				+ 添加数据
			</button>
			<view
				v-for="(row, i) in columnValue"
				class="border-d border-r-10 p10 mt10 mb20"
				:key="i"
			>
				<view class="backf">
					<view
						v-for="(columnItem, columnIndex) in columnsList[i]"
						:key="columnIndex"
					>
						<template v-if="columnItem.name !== 'TableList'">
							<uni-forms-item
								:key="columnIndex"
								:name="columnItem.id"
								:label="
									columnItem.name != 'TableList'
										? columnItem.title
										: ''
								"
								label-width="100%"
								:required="isRequired(columnItem)"
							>
								<form-design-render
									:ref="columnItem.id"
									:config="columnItem"
									:placeholder="columnItem.props.placeholder"
									:options="columnItem.props.options"
									:value="row[columnItem.id]"
									:name="config.name"
									:readonly="readonly"
									:expanding="columnItem.props.expanding"
									@setSingure="setSingure($event, i)"
									@inputValList="
										getValueList($event, i, _value)
									"
								/>
							</uni-forms-item>
							<div
								class="error-warning"
								v-if="
									isRequired(columnItem) &&
									isClickSumbit &&
									((!row[columnItem.id] &&
										row[columnItem.id] !== 0) ||
										(row[columnItem.id] &&
											row[columnItem.id].length === 0))
								"
							>
								{{ rules[columnItem.id][0].errorMessage }}
							</div>
						</template>
					</view>
					<button
						class="delete-button small-size"
						@tap="deleteColumn(i)"
					>
						删除
					</button>
				</view>
			</view>
			<uni-popup ref="delAlertDialog" type="dialog">
				<uni-popup-dialog
					type="center"
					cancelText="取消"
					confirmText="确认"
					title="删除提示"
					content="是否删除这一项？"
					@confirm="dialogConfirm"
					@close="dialogClose"
				>
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<view v-else>
			<view
				v-for="(row, i) in _value"
				class="border-d border-r-10 p10 mt10 mb20"
				:key="i"
			>
				<view class="backf">
					<view
						v-for="(columnItem, columnIndex) in columnsList[i]"
						:key="columnIndex"
					>
						<template
							v-if="
								columnItem.name !== 'TableList' &&
								row[columnItem.id] != undefined
							"
						>
							<uni-forms-item
								:key="columnIndex"
								:name="columnItem.id"
								:label="
									columnItem.name != 'TableList'
										? columnItem.title
										: ''
								"
								label-width="100%"
							>
								<form-design-render
									:ref="columnItem.id"
									:config="columnItem"
									:placeholder="columnItem.props.placeholder"
									:options="columnItem.props.options"
									:value="row[columnItem.id]"
									:name="config.name"
									:readonly="readonly"
									:expanding="columnItem.props.expanding"
								/>
							</uni-forms-item>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import FormDesignRender from '../forms/FormDesignRender.vue'
export default {
	components: { FormDesignRender },
	props: {
		config: {
			type: Object,
			default: () => {
				return {}
			},
		},
		isClickSumbit: {
			type: Boolean,
			default: false,
		},
		value: {
			default: undefined,
		},
		valueId: {
			default: undefined,
		},
		// rules: {
		//   type: Object,
		//   default: () => {
		//     return {};
		//   },
		// },
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			columnsList: [],
			columnValue: [],
			column: [],
			columnIndex: 0,
		}
	},
	computed: {
		_value: {
			get() {
				return this.value
			},
		},
		rules() {
			const rules = {}
			this.columnsList.forEach((col) => {
				col.forEach((row) => {
					if (row.props.required) {
						rules[row.id] = [
							{
								type:
									row.valueType === 'Array'
										? 'array'
										: undefined,
								required: true,
								errorMessage: `请填写${row.title}`,
								trigger: 'blur',
							},
						]
					}
				})
			})
			return rules
		},
	},
	watch: {
		value: {
			handler: function (val, oldVal) {
				console.log(val, '====----columnValue')
				if (val) {
					this.columnValue = Object.values(val)
				}
			},
			deep: true,
			immediate: true,
		},
		config: {
			immediate: true, // 将立即以表达式的当前值触发回调
			handler: function (val, oldVal) {
				if (this.config.props.columns.length > 0) {
					if (this.readonly) {
						this._value &&
							Object.values(this._value).forEach((i) => {
								this.columnsList.push(this.config.props.columns)
							})
					} else {
						this.columnsList.push(this.config.props.columns)
					}
					this.column = this.config.props.columns
					let row = {}
					this.column.forEach((col) => this.$set(row, col.id, null))
					if (this._value && this._value.length > 0) {
						this.columnValue = this._value.concat([row])
					} else {
						this.columnValue.push(row)
					}
				}
			},
			deep: true,
		},
	},

	methods: {
		// isReadonly(item) {
		// 	return item.perm === 'R'
		// },
		dialogConfirm() {
			this.columnValue.splice(this.columnIndex, 1)
			const obj = { ...this.columnValue }
			this.$emit('inputTableValue', { [this.valueId]: obj })
			this.dialogClose()
		},
		dialogClose() {
			this.$refs.delAlertDialog.close()
		},
		setSingure($event, i) {
			this.$emit('setSingure', {
				...$event,
				name: 'table',
				columnValue: this.columnValue,
				index: i,
				tableId: this.valueId,
			})
		},
		addColumn() {
			this.columnsList.push(this.config.props.columns)
			this.column = this.config.props.columns
			let row = {}
			this.column.forEach((col) => this.$set(row, col.id, null))
			if (this._value && this._value.length > 0) {
				this.columnValue = this._value.concat([row])
			} else {
				this.columnValue.push(row)
			}
			const obj = { ...this.columnValue }
			this.$emit('inputTableValue', { [this.valueId]: obj })
		},
		deleteColumn(i) {
			this.columnIndex = i
			this.$refs.delAlertDialog.open()
		},
		isRequired(item) {
			return (
				this.rules[item.id] && this.rules[item.id][0].required === true
			)
		},
		getValueList(value, index) {
			this.columnValue[index] = { ...this.columnValue[index], ...value }
			const obj = { ...this._value, ...{ ...this.columnValue } }
			this.$emit('inputTableValue', { [this.valueId]: obj })
		},
	},
}
</script>
<style scoped lang="scss">
.readonly {
	font-size: 40rpx !important;
	margin-bottom: -50rpx;
	margin-top: -10rpx;
}
.error-warning {
	color: red;
	font-size: 28rpx;
	position: relative;
	top: -30rpx;
}
</style>
